<template>
  <div>
    <a-col :span="14">
      <a-form-item label="静态模板" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24},sm: {span: 15}}">
        <a-tree-select
          :defaultValue="model.md5Key"
          :value="model.md5Key"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          @change="changeTemplate"
          placeholder="请先安装模板后在选择模板"
          tree-default-expand-all>
        </a-tree-select>
      </a-form-item>
    </a-col>

    <a-col :xl="{span: 2}" :lg="{span: 8}" :md="{span: 12}">
      <a-form-item label="" :labelCol="{xs: {span: 24}}" :wrapperCol="wrapperCol">
        <span @click="loadTemplate"><a-icon type="reload" v-if="!reloading"/></span>
        <span><a-icon type="loading" v-if="reloading"/></span>
      </a-form-item>
    </a-col>

  </div>
</template>
<script>
import { loadTemplate } from '@/api/site/category'
export default {
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  components: {
  },
  data () {
    return {
      labelCol: {
        xs: {
          span: 10
        },
        sm: {
          span: 4
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 13
        }
      },
      treeData: [],
      reloading: true
    }
  },
  watch: {
  },
  created () {
    this.loadTemplate()
  },
  methods: {
    loadTemplate () {
      this.reloading = true
      loadTemplate().then(response => {
        if (response.code === 0) {
          this.treeData = response.res.templateFiles
          this.reloading = false
        }
      })
    },
    setModel (model) {
      console.log(model)
       this.model = model
    },
    changeTemplate (value, label, e) {
       this.$set(this.model, 'md5Key', value)
       this.$emit('change', this.model.id, value, label, e)
    }
  }
}
</script>
